let vm = new Vue({
    el: '#app', // 通过ID选择器找到绑定的HTML内容
    // 修改Vue读取变量的语法
    delimiters: ['[[', ']]'],
    data: { // 数据对象
        // v-model
        username: '',
        password: '',
        password2: '',
        mobile: '',
        allow: '',
        image_code_url: '',
        uuid: '',

        // v-show
        error_name: false,
        error_password: false,
        error_password2: false,
        error_mobile: false,
        error_allow: false,

        // error_message
        error_name_message: '',
        error_mobile_message: '',
    },
    mounted() { // 页面加载完会被调用的
        // 生成图形验证码
        this.generate_image_code();
    },
    methods: { // 定义和实现事件方法
        // 生成图形验证码的方法：封装的思想，代码复用
        generate_image_code() {
            this.uuid = generateUUID();
            this.image_code_url = '/image_codes/' + this.uuid + '/';
        },
        // 校验用户名
        check_username() {
            // 用户名是5-20个字符，[a-zA-Z0-9_-]
            // 定义正则
            // let re = /^[a-zA-Z0-9_-]{2,10}$/;
            // // 使用正则匹配用户名数据
            // if (re.test(this.username)) {
            //     // 匹配成功，不展示错误提示信息
            //     this.error_name = false;
            // } else {
            //     // 匹配失败，展示错误提示信息
            //     this.error_name_message = '请输入5-20个字符的用户名';
            //     this.error_name = true;
            // }

            // 判断用户名是否重复注册
            if (this.error_name === false) { // 只有当用户输入的用户名满足条件时才回去判断
                let url = '/usernames/' + this.username + '/count/';
                axios.get(url, {
                    responseType: 'json'
                })
                    .then(response => {
                        if (response.data.count === 1) {
                            // 用户名已存在
                            this.error_name_message = '用户名已存在';
                            this.error_name = true;
                        } else {
                            // 用户名不存在
                            this.error_name = false;
                        }
                    })
                    .catch(error => {
                        console.log(error.response);
                    })
            }
        },
        // 校验密码
        check_password() {
            let re = /^\d{6}$/;
            if (re.test(this.password)) {
                this.error_password = false;
            } else {
                this.error_password = true;
            }
        },
        // 校验确认密码
        check_password2() {
            if (this.password != this.password2) {
                this.error_password2 = true;
            } else {
                this.error_password2 = false;
            }
        },
        // 校验学号
        check_mobile() {
            let re = /^17\d{9}$/;
            if (re.test(this.mobile)) {
                this.error_mobile = false;
            } else {
                this.error_mobile_message = '您输入的学号格式不正确';
                this.error_mobile = true;
            }
        },
        // 校验是否勾选协议
        // check_allow() {
        //     if (!this.allow) {
        //         this.error_allow = true;
        //     } else {
        //         this.error_allow = false;
        //     }
        // },
        // 监听表单提交事件
        on_submit() {
            this.check_username();
            this.check_password();
            this.check_password2();
            this.check_mobile();
            this.check_allow();

            // 在校验之后，注册数据中，只要有错误，就禁用掉表单的提交事件
            if (this.error_name == true || this.error_password == true || this.error_password2 == true || this.error_mobile == true || this.error_allow == true) {
                // 禁用掉表单的提交事件
                window.event.returnValue = false;
            }
        },
    }
});
function departmentInit(_cmbCollege, _cmbDepartment, defaultCollege, defaultDepartment) {
  var cmbCollege = document.getElementById(_cmbCollege);
var cmbDepartment = document.getElementById(_cmbDepartment);
function cmbSelect(cmb, str) {
  for (var i = 0; i < cmb.options.length; i++) {
      if (cmb.options[i].value == str) {
          cmb.selectedIndex = i;
          return;
      }
  }
}
function cmbAddOption(cmb, str, obj) {
  var option = document.createElement("OPTION");
  cmb.options.add(option);
  option.innerHTML = str;
  option.value = str;
  option.obj = obj;
}

function changeCollege() {
  cmbDepartment.options.length = 0;
  cmbDepartment.onchange = null;
  if (cmbCollege.selectedIndex == -1) return;
  var item = cmbCollege.options[cmbCollege.selectedIndex].obj;
  for (var i = 0; i < item.DepartmentList.length; i++) {
      cmbAddOption(cmbDepartment, item.DepartmentList[i].name, item.DepartmentList[i]);
  }
  cmbSelect(cmbDepartment, defaultDepartment);
}




for (var i = 0; i < CollegeList.length; i++) {
  cmbAddOption(cmbCollege, CollegeList[i].name, CollegeList[i]);
}
cmbSelect(cmbCollege, defaultCollege);
changeCollege();
cmbCollege.onchange = changeCollege;
return;
}

var CollegeList = [
{
  name: ' 哲学社会学学院', DepartmentList: [{ name: '哲学' }, { name: '伦理学' }, { name: '社会学' }, { name: '社会工作' }, { name: '教育学' }, { name: '学前教育' }]
},
{
  name: ' 经济与管理学院', DepartmentList: [{ name: '经济学' }, { name: '国际经济与贸易' }, { name: '金融学' }, { name: '经济统计学  ' }, { name: '工商管理' }, { name: '信息管理与信息系统' }, { name: '电子商务' }, { name: '会计学' }, { name: '酒店管理' }, { name: '物业管理' }, { name: '图书馆学' }]
},
{
  name: ' 法学院', DepartmentList: [{ name: '法学' }, { name: '知识产权' }]
},
{
  name: ' 政治与公共管理学院', DepartmentList: [{ name: '国际政治' }, { name: '思想政治教育' }, { name: '政治学与行政学 ' }, { name: '行政管理' }, { name: '劳动与社会保障' }]
},
{
  name: ' 体育学院', DepartmentList: [{ name: '体育教育' }, { name: '运动训练' }, { name: '社会体育指导与管理 ' }, { name: '武术与民族传统体育  ' }]
},
{
  name: ' 文学院', DepartmentList: [{ name: '汉语言文学' }, { name: '汉语国际教育' }, { name: '书法学  ' }, { name: '新闻学' }, { name: '广告学  ' }, { name: '戏剧影视文学' }]
},
{
  name: ' 外语学院', DepartmentList: [{ name: '英语' }, { name: '俄语' }, { name: '德语  ' }, { name: '日语  ' }, { name: '翻译  ' }]
},
{
  name: ' 美术学院', DepartmentList: [{ name: '绘画' }, { name: '雕塑  ' }, { name: '艺术设计' }, { name: '公共艺术' }, { name: '数字媒体艺术' }, { name: '视觉传达设计 ' }, { name: '环境设计' }]
},
{
  name: ' 音乐学院', DepartmentList: [{ name: '音乐学' }, { name: '作曲与作曲技术理论' }, { name: '音乐表演' }, { name: '舞蹈编导  ' }]
},
{
  name: ' 历史文化学院', DepartmentList: [{ name: '历史学' }, { name: '考古学' }, { name: '博物馆学' }, { name: '旅游管理' }]
},
{
  name: ' 数学与统计学院', DepartmentList: [{ name: '数学与应用数学' }, { name: '信息与计算科学' }, { name: '统计学' }]
},
{
  name: ' 化学化工学院', DepartmentList: [{ name: '化学' }, { name: '应用化学' }, { name: '材料化学' }, { name: '药学' }]
},
{
  name: ' 生命科学学院', DepartmentList: [{ name: '自然地理与资源环境' }, { name: '资源环境与城乡规划管理' }, { name: '食品科学与工程' }, { name: '生物工程' }]
},
{
  name: ' 物理电子工程学院', DepartmentList: [{ name: '电子信息科学与技术' }, { name: '光信息科学与技术' }, { name: '材料物理' }, { name: '电子科学与技术' }]
},
{
  name: ' 环境与资源学院', DepartmentList: [{ name: '环境科学' }, { name: '环境生态工程' }, { name: '环境工程' }]
},
{
  name: ' 教育科学学院', DepartmentList: [{ name: '应用心理学' }]
},
{
  name: ' 电子信息工程系', DepartmentList: [{ name: '电子信息工程' }]
},
{
  name: ' 人工智能与大数据学院', DepartmentList: [{ name: '计算机科学与技术' }, { name: '计算机科学与技术（大数据方向）' }, { name: '物联网工程' }]
},
{
  name: ' 软件学院', DepartmentList: [{ name: '软件工程' }]
},
{
  name: ' 自动化系', DepartmentList: [{ name: '测控技术与仪器' }, { name: '电气工程及其自动化' }, { name: '自动化' }]
},
{
  name: ' 土木工程系', DepartmentList: [{ name: '土木工程' }, { name: '建筑学' }]
},
{
  name: ' 电力工程系', DepartmentList: [{ name: '建筑环境与能源应用工程' }, { name: '建筑电气与智能化' }, { name: '机械电子工程' }]
},
{
  name: ' 动力工程系', DepartmentList: [{ name: '能源与动力工程' }, { name: '新能源科学与工程' }]
},
{
  name: ' 工程管理系', DepartmentList: [{ name: '工程管理' }, { name: '工程造价' }]
}
];